<template>
    <div class="sub-category">
        <div class="container">
            <SubBread/>
            <SubFilter @filter-change="changeFilter"/>

            <div class="goods-list">
                <!-- 排序 -->
                <SubSort @sort-change="changeSort"/>
                <!-- 列表 -->
                <ul>
                    <li v-for="item in list" :key="item.id">
                        <GoodsItem :goods="item"/>
                    </li>
                </ul>
                <XtxInfiniteLoading :loading="loading" :finished="noMore" @infinite="findSubCategoryGoods"/>
            </div>
        </div>

    </div>
</template>

<script>
    import SubBread from "@/views/category/components/sub-bread";
    import SubFilter from "@/views/category/components/sub-filter";
    import SubSort from "@/views/category/components/sub-sort";
    import GoodsItem from "@/views/category/components/goods-item";
    import {findSubCategoryGoods} from "@/api/category";
    import XtxInfiniteLoading from "@/views/category/components/xtx-infinite-loading";

    export default {
        name: "SubCategory",
        components: {XtxInfiniteLoading, GoodsItem, SubSort, SubFilter, SubBread},
        data() {
            return {
                reqParams: {
                    page: 1,
                    pageSize: 20
                },
                list: [],
                loading: false,
                noMore: false
            }
        },
        methods: {
            async findSubCategoryGoods() {
                console.log('开始请求数据。。。。')
                this.loading = true
                const {result} = await findSubCategoryGoods(this.reqParams)
                if (result.items.length) {
                    this.list.push(...result.items)
                    this.reqParams.page++;
                } else {
                    this.noMore = true
                }
                this.loading = false
            },
            changeFilter(filterParams){
                this.reqParams = { ...this.reqParams, ...filterParams }
                this.reqParams.page = 1
                this.list = []
                this.noMore = false
            },
            changeSort(sortParams){
                this.reqParams = { ...this.reqParams, ...sortParams }
                this.reqParams.page = 1
                this.list = []
                this.noMore = false
            }
        },
        watch:{
            '$route.params.id': {
                handler(newVal) {
                    if (newVal && this.$route.path === ('/category/sub/' + newVal)) {
                        this.reqParams.page = 1
                        this.list = []
                        this.noMore = false
                        this.findSubCategoryGoods()
                    }
                },
                immediate: true
            }
        }

    }
</script>

<style scoped lang="less">

    .sub-category {
        background: #f5f5f5;

        .goods-list {
            background: #fff;
            padding: 0 25px;
            margin-top: 25px;


            ul {
                display: flex;
                flex-wrap: wrap;
                padding: 0 5px;

                li {
                    margin-right: 20px;
                    margin-bottom: 20px;

                    &:nth-child(5n) {
                        margin-right: 0;
                    }
                }
            }
        }
    }

</style>